import { defineComponent, reactive, toRefs } from 'vue'
import { NInput, NForm, NFormItem, NModal } from 'naive-ui'
import { modUserInfoReq } from '@/service/modules/user'
import { getUserInfoReq } from '@/service/modules/user'
import { Response } from '@/service/modules/common/types'
import { UserInfo } from '@/service/modules/user/types'

const ModUserInfoModal = defineComponent({
  name: 'ModUserInfoModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  emits: ['modalShowChange'],
  setup() {
    const userInfo: UserInfo = window.$store.state.userInfo
    const state = reactive({
      modUserInfoForm: {
        nickname: userInfo.nickname,
        mobile: userInfo.mobile,
        email: userInfo.email
      },
      positiveButtonDisabled: false
    })

    return { ...toRefs(state), userInfo }
  },
  methods: {
    async onPositiveClick() {
      //提交修改用户信息请求
      this.positiveButtonDisabled = true
      const res: Response<any> = await modUserInfoReq({
        ...this.modUserInfoForm
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        // this.initData()
        this.$emit('modalShowChange', false)
        //更新用户信息缓存
        const userInfoRes: Response<UserInfo> = await getUserInfoReq()
        window.$store.commit('updateUserInfo', userInfoRes.data)
        this.positiveButtonDisabled = false
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.initData()
      this.$emit('modalShowChange', false)
    },
    initData() {
      this.modUserInfoForm.nickname = this.userInfo.nickname
      this.modUserInfoForm.mobile = this.userInfo.mobile
      this.modUserInfoForm.email = this.userInfo.email
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('user.modUserInfoTitle')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled: this.positiveButtonDisabled
        }}
        onClose={this.onNegativeClick}
      >
        <NForm>
          <NFormItem path='nickname' label={window.$t('user.nickname')}>
            <NInput
              type='text'
              size='large'
              v-model={[this.modUserInfoForm.nickname, 'value']}
              placeholder={window.$t('user.nicknameTips')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='mobile' label={window.$t('user.mobile')}>
            <NInput
              type='text'
              size='large'
              v-model={[this.modUserInfoForm.mobile, 'value']}
              placeholder={window.$t('user.mobileTips')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='email' label={window.$t('user.email')}>
            <NInput
              type='text'
              size='large'
              v-model={[this.modUserInfoForm.email, 'value']}
              placeholder={window.$t('user.emailTips')}
              autofocus
            />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default ModUserInfoModal
